<template>
	<view class="info">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="search-top">
			<view class="icon" @click="HandleReturn">
				<uni-icons type="left" size="30" style="margin-right: 20rpx;"></uni-icons>
			</view>
			<view class="title">客 户 信 息</view>
		</view>
		<view class="info-search">
			<view class="search_icons">
				<view class="icon">
					<uni-icons type="search" size="20" color="#797979"></uni-icons>
				</view>
				<input class="uni-input" v-model="keyword" placeholder="搜索公司名称、类型" />
				<view @click="search" class="search">搜索</view>
			</view>
		</view>
		<up-loadmore status="loading" v-if="isLoading" />
		<view class="customer" v-else>
			<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="dataLists.length == 0">
			</up-empty>
			<scroll-view scroll-y="true" class="scroll-y" v-else>
				<view class="item" @click="customerHandler(item)" v-for="item in dataLists" :key="item.id">
					<view class="customer-info">
						<text>{{item.entName}}</text>
						<!-- <text v-if="item.informType == 1">维修类</text>
						<text v-if="item.informType == 2">维保类</text>
						<text v-if="item.informType == 3">安全隐患预警类</text> -->
						<text v-if="item.entType == '1'">维保计划类型</text>
						<text v-else-if="item.entType == '2'">企业类型</text>
						<text v-else></text>
					</view>
					<view class="customer-btn">
						<text>点击查看该公司维保任务</text>
					</view>
					<!-- <view class="customer-info">
					<text>S.F. Systems (Shenzhen) Ltd.</text>
					<text>工业类</text>
				</view>
				<view class="customer-btn">
					<text>点击查看该公司维保任务</text>
				</view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCustomersList
	} from '@/api/customers.js'
	import toSafe from '@/compoents/top-safe.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
	} from 'vue'
	let dataLists = reactive([])
	let isLoading = ref(false)

	onLoad(() => {
		getLists()
	})
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const customerHandler = item => {
		uni.navigateTo({
			url: `/pages/customer/maintenance?id=${item.id}`
		})
	}
	const getLists = () => {
		isLoading.value = true
		getCustomersList().then(res => {
			if (res.code == 200) {
				dataLists.splice(0, dataLists.length, ...[...res.rows])
			}
			isLoading.value = false
		})
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.info {
		width: 100%;
		height: 100%;
		background: #fff;
		padding: 0 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.search-top {
			height: 88rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 10vw;
				height: 88rpx;
				line-height: 88rpx;
				z-index: 1;
			}

			.title {
				width: 90vw;
				line-height: 88rpx;
				height: 88rpx;
				text-align: center;
				margin-left: -8vw;
				font-size: 34rpx;
				font-weight: 700;
			}
		}

		.info-search {

			.search_icons {
				margin: 20rpx 0;
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}
		}

		.customer {
			width: 100%;
			height: 100%;
			flex: 1;

			.scroll-y {
				height: 100%;

				.item {
					width: inherit;
					height: 164rpx;
					margin-bottom: 30rpx;
					padding: 10rpx 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					border-radius: 24rpx;
					overflow: hidden;
					background-image: url('@/punlic/image/gyl.jpeg');
					background-size: 694rpx 28rpx;
					background-repeat: no-repeat;
					background-size: cover;
					background-attachment: fixed;

					.customer-info {
						.inline_space_between();
						font-size: 30rpx;

						text:nth-child(1) {
							color: #000000;
							font-style: normal;
							font-weight: bold;
							line-height: 40rpx;
						}

						text:nth-child(2) {
							color: #ff5c00;
							text-align: right;
							font-family: "PingFang SC";
							font-style: normal;
							line-height: 40px;
						}
					}

					.customer-btn {
						font-size: 26rpx;
						opacity: 0.8;

					}
				}
			}
		}



		.search-placeholder {
			width: 100%;
			height: 60rpx;
			background-color: #cfd9f9;
			font-size: 28rpx;
			color: #325EF5;
			text-align: center;
			line-height: 60rpx;
		}
	}
</style>